<script lang="ts" setup>
import { ref } from "vue"

const dataList = ref<any[]>([
    {
        wxinfo: '微信昵称',
        code: '121083638',
        activityName: '海润艺术—168元入场券抢占最高最高32节课+豪享5重大礼包',
        content: '报名后无法联系商家',
        description: '没有上课，要求全额退款',
        createdAt: '2021-01-01 00:00:00',
        screenshot: 'https://picsum.photos/200/300',
        status: '待处理',
        finishedAt: '--'
    },
    {
        wxinfo: '微信昵称',
        code: '121083638',
        activityName: '克丽缇娜拼团480元拼团秒杀价值8888元宠粉卡！邀请即享50红包！',
        content: '商家拒绝退款',
        description: '我现在不想要了，商家不给退款',
        createdAt: '2021-01-01 00:00:00',
        screenshot: 'https://picsum.photos/200/300',
        status: '已处理',
        finishedAt: '2021-01-01 00:00:00'
    },
    {
        wxinfo: '微信昵称',
        code: '121083638',
        activityName: '贝蒂舞蹈&谷白书画168元抢24-38节课！4人团团长免单！',
        content: '虚假活动、活动不真实',
        description: '拼不成团不让退，机构课程不清晰，好糊',
        createdAt: '2021-01-01 00:00:00',
        screenshot: 'https://picsum.photos/200/300',
        status: '已处理',
        finishedAt: '2021-01-01 00:00:00'
    },
])

const modalVisible = ref(false)
const formAction = ref('')

const handleAction = (action: string) => {
    if (action === 'add') {
        modalVisible.value = true
        formAction.value = 'add'
    }
};
</script>

<template>
    <umrp-container :gap="16" padding="16px" bg-color="#f2f2f2" height="100%">
        <umrp-breadcrumb :items="['首页', '投诉处理']"></umrp-breadcrumb>
        <umrp-search-card>
            <umrp-row :gutter="12">
                <umrp-col :span="8">
                    <umrp-form-item label="投诉人">
                        <umrp-input placeholder="请输入投诉人的微信昵称"></umrp-input>
                    </umrp-form-item>
                </umrp-col>
                <umrp-col :span="8">
                    <umrp-form-item label="报名姓名">
                        <umrp-input placeholder="请输入报名人的姓名"></umrp-input>
                    </umrp-form-item>
                </umrp-col>
                <umrp-col :span="8">
                    <umrp-form-item label="联系方式">
                        <umrp-input placeholder="请输入报名人的手机号码"></umrp-input>
                    </umrp-form-item>
                </umrp-col>
                <umrp-col :span="8">
                    <umrp-form-item label="活动名称">
                        <umrp-input placeholder="请输入活动的名称"></umrp-input>
                    </umrp-form-item>
                </umrp-col>
                <umrp-col :span="8">
                    <umrp-form-item label="处理时间">
                        <umrp-datepicker-range></umrp-datepicker-range>
                    </umrp-form-item>
                </umrp-col>
                <umrp-col :span="8">
                    <umrp-form-item label="处理状态">
                        <umrp-select>
                            <umrp-option value="3">全部</umrp-option>
                            <umrp-option value="1">已处理</umrp-option>
                            <umrp-option value="2">待处理</umrp-option>
                        </umrp-select>
                    </umrp-form-item>
                </umrp-col>
            </umrp-row>
        </umrp-search-card>
        <umrp-card :border="false">
            <umrp-table :data="dataList" @action="handleAction">
                <template #columns>
                    <umrp-table-column title="序号" data-index="id"></umrp-table-column>
                    <umrp-table-column title="投诉用户" slot-name="wxinfo"></umrp-table-column>
                    <umrp-table-column title="报名信息" slot-name="registration"></umrp-table-column>
                    <umrp-table-column title="投诉活动" slot-name="activityName"></umrp-table-column>
                    <umrp-table-column title="投诉时间" data-index="createdAt"></umrp-table-column>
                    <umrp-table-column title="投诉内容" data-index="content"></umrp-table-column>
                    <umrp-table-column title="投诉描述" data-index="description"></umrp-table-column>
                    <umrp-table-column title="活动截图" slot-name="screenshot"></umrp-table-column>
                    <umrp-table-column title="状态" data-index="status"></umrp-table-column>
                    <umrp-table-column title="处理时间" data-index="finishedAt"></umrp-table-column>
                    <umrp-table-column title="操作" slot-name="action" :width="60"></umrp-table-column>
                </template>
                <template #activityName="{ record }">
                    <umrp-text :ellipsis="200">{{ record.activityName }}</umrp-text>
                </template>
                <template #action>
                    <umrp-space :size="10">
                        <umrp-popconfirm message="您确认已经处理此次投诉么？">
                            <umrp-button type="primary">完成</umrp-button>
                        </umrp-popconfirm>
                    </umrp-space>
                </template>
                <template #wxinfo="{ record }">
                    <umrp-user-info :phone="false" :nick-name="record.wxinfo" :code="record.code"></umrp-user-info>
                </template>
                <template #registration>
                    <umrp-space direction="vertical" :size="6">
                        <umrp-text>黄小尚</umrp-text>
                        <umrp-text>13512345678</umrp-text>
                    </umrp-space>
                </template>
                <template #screenshot>
                    <umrp-image :width="50" :height="50"></umrp-image>
                </template>
            </umrp-table>
        </umrp-card>
        <umrp-modal :width="500" v-model:visible="modalVisible">
            <umrp-form>
                <umrp-form-item label="员工姓名" :required="true">
                    <umrp-input placeholder="请输入员工的真实姓名"></umrp-input>
                </umrp-form-item>
                <umrp-form-item label="手机号码" :required="true">
                    <umrp-input placeholder="请输入员工的手机号码"></umrp-input>
                </umrp-form-item>
                <umrp-form-item label="绑定微信" v-if="formAction === 'edit'">
                    <umrp-qrcode></umrp-qrcode>
                </umrp-form-item>
            </umrp-form>
        </umrp-modal>
    </umrp-container>
</template>